import React, { Ref, useMemo, useRef, useState } from 'react';
import { HeaderAPI } from '@/components/GlobalHeader/type';
import { Row, Col, Menu, Typography, Tag, Card, Empty, Badge } from 'antd';
import { getPosIDs } from '@/utils/authority';
import MyIcon from '@/components/MyIcon';
import cls from 'classnames';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import '@/components/GlobalHeader/styles.less';
import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';

const SwitchPosition = React.forwardRef(({ switchingPos, positionList, allUserInfo, dispatch, onClose }: HeaderAPI.ISwitchPosition, ref) => {
  const [selectedKeys, setSelectedKeys] = useState(getPosIDs());
  let ModalWidth = document.body.clientWidth * 0.4;

  /**
   * modal ref
   */
  const switchPosModalRef: Ref<IOneModalRef> = useRef(null);

  /**
   * 关闭弹窗
   */
  const onCloseModal = () => {
    if (switchPosModalRef) {
      if (switchPosModalRef.current) {
        if (switchPosModalRef.current.onModalCancel) {
          switchPosModalRef.current.onModalCancel();
        }
      }
    }
  };

  /* 确定切换岗位 */
  const onOk = () => {
    dispatch({
      //关闭所有弹窗
      type: 'navTab/updateWindow',
      payload: [],
    });
    switchingPos(selectedKeys);
    onCloseModal();
  };

  /**  4.23.1 版本menuItem 用法 */
  const posMenuItemMemo = useMemo(() => {
    let posMenuItem: any = [];
    positionList?.forEach((item: any) => {
      let itemObj: Record<string, any> = {
        label: item?.name,
        key: item?.id,
      };
      posMenuItem?.push(itemObj);
    });
    return posMenuItem;
  }, [positionList]);

  return (
    <OneModal
      ref={switchPosModalRef}
      title={'切换岗位'}
      onOk={onOk}
      onCancel={onClose}
      open={true}
      centered={true}
      getContainer={false}
      width={ModalWidth > 400 ? ModalWidth : ''}
      bodyStyle={{
        padding: 0,
        height: document.body.clientHeight * 0.4,
      }}
    >
      <Row className={cls('switch-pos-layout')}>
        <Col span={6} className={cls('switch-pos-menu')}>
          <ScrollBarLayout>
            <Menu
              theme={'light'}
              selectedKeys={selectedKeys}
              onClick={(e) => {
                setSelectedKeys(e.key);
              }}
              style={{
                height: '100%',
              }}
              items={posMenuItemMemo}
            >
              {/* {positionList?.map((item) => {
                  return <Menu.Item key={item?.id}>{item?.name}</Menu.Item>;
                })} */}
            </Menu>
          </ScrollBarLayout>
        </Col>
        <Col span={18} className={cls('switch-pos-content')}>
          <ScrollBarLayout>
            {((selectedKeys) => {
              // let targetItem = allUserInfo?.paramObject?.[`${selectedKeys}`]?.companyInfoMap; //个人信息
              const targetPosition: Record<string, any> | any = positionList?.find((item) => selectedKeys == item?.id);
              let isSelect = targetPosition?.id == getPosIDs();
              return (
                <div className={cls('target-box')}>
                  <div className={cls('target-box-title')}>
                    <Badge.Ribbon style={{ display: isSelect ? 'block' : 'none' }} color={'red'} text={'当前岗位'}>
                      <Typography.Title level={4}>岗位信息</Typography.Title>
                    </Badge.Ribbon>
                    <Tag color={'geekblue'} icon={<MyIcon type="bank" />}>
                      &nbsp;{targetPosition?.companyName ?? '暂无公司'}
                    </Tag>
                    <Tag color={'purple'} icon={<MyIcon type="cluster" />}>
                      &nbsp;{targetPosition?.departmentName ?? '暂无部门'}
                    </Tag>
                    {/* <Tag
                        color={'cyan'}
                        icon={<MyIcon type="icon-gangweitubiao" />}
                      >
                        &nbsp;{targetPosition?.positionName ?? '暂无岗位'}
                      </Tag> */}
                  </div>
                  <div className={cls('target-box-des')}>
                    <Typography.Title level={5}>岗位描述</Typography.Title>
                    <Card
                      style={{
                        flex: 'auto',
                      }}
                      bodyStyle={{
                        padding: '.75rem',
                        height: '100%',
                      }}
                    >
                      {targetPosition?.description ? (
                        <Typography.Text>{targetPosition?.description}</Typography.Text>
                      ) : (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={'暂无描述'} />
                      )}
                    </Card>
                  </div>
                </div>
              );
            })(selectedKeys)}
          </ScrollBarLayout>
        </Col>
      </Row>
    </OneModal>
  );
});
export default SwitchPosition;
